<template>
  <div class="container" >
    <div class="top">     
      <el-menu  class="el-menu-demo" mode="horizontal" >
        <el-menu-item index="1"> <router-link to="/menu/demo1">示例1</router-link> </el-menu-item> 
        <el-menu-item index="2"> <router-link to="/menu/demo2">示例2</router-link> </el-menu-item> 
        <el-menu-item index="3"> <router-link to="/menu/demo3">示例3</router-link> </el-menu-item> 
      </el-menu>
    </div>  
    <div class="main">

      <router-view></router-view> 
    </div>  
  </div>
</template>


<script> 
export default {
  components: { 
  },
    


  data() {
    return {
        menus:[
          {link:'/demo/demo1',label:'demo1'},
          {link:'/demo/demo2',label:'demo3'},
          {link:'/demo/demo3',label:'demo3'}
        ]
    }
  },
  methods: {
  
  }
}
</script>
 
<style>
  .container{
      height: 600px;
  }
  .top{ 
    height: 15%; 
  }

  .main{ 
    height: 85%;
    flex-direction: column; 
    border: 1px; 
  }  

</style>